﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Dashboard.aspx.cs" Inherits="FastTravel.IntranetWeb.Dashboard"%>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title>Панель управления</title>
	<style type="text/css">
		div.item-wrap {
				float  : left;
				border : 1px solid transparent;
				margin : 5px 25px 5px 25px;
				width  : 100px;
				cursor : pointer;
				height : 120px;
				text-align : center;
		}

		div.item-wrap img {
				margin : 5px 0px 0px 5px;
				width  : 61px;
				height : 77px;
		}

		div.item-wrap h6 {
				font-size : 14px;
				color : #3A4B5B;
				font-family : tahoma,arial,san-serif;
		}

		.items-view .x-view-over {
			border : solid 1px silver;
		}

		#items-ct {
			padding : 20px 30px 24px 30px;
		}

		#items-ct h2 {
			border-bottom : 2px solid #3A4B5B;
			cursor : pointer;
		}

		#items-ct h2 div {
			background  : transparent url(/resources/images/group-expand-sprite.gif) no-repeat 3px -47px;
			padding     : 4px 4px 4px 17px;
			font-family : tahoma,arial,san-serif;
			font-size   : 12px;
			color       : #3A4B5B;
		}

		#items-ct .collapsed h2 div { background-position: 3px 3px; }
		#items-ct dl { margin-left: 2px; }
		#items-ct .collapsed dl { display:none; }
		#dshTitle{
			font-family: MyriadPro-Semibold, 'Myriad Pro Semibold', 'Myriad Pro', 'Trebuchet MS', Tahoma, arial, sans-serif;
			font-size: 120%;
			margin: 10px 0px 10px 30px;
			padding: 0px;
			text-shadow: #CCC 1px 1px 0;
			text-transform:uppercase;
		}
	</style>

	<script type="text/javascript">

		var selectionChanged = function (dv, nodes) {
			if (nodes.length > 0) {
				var panel = nodes[0].getAttribute('ext:panel');
				var menu = nodes[0].getAttribute('ext:menu');

				if (!Ext.isEmpty(panel, false)) {
					parent.window[panel].expand(false);
				}

				if (!Ext.isEmpty(menu, false)) {
					(function () {
						parent.window[menu].parentMenu.fireEvent("itemclick", parent.window[menu]);
					}).defer(250);
				}
			}
		};

		var viewClick = function (dv, e) {
			var group = e.getTarget('h2', 3, true);
			if (group) {
				group.up('div').toggleClass('collapsed');
			}
		};
	</script>
</head>
<body>
	<form id="formDashboard" runat="server">

	<ext:ResourceManager ID="resourceManager" runat="server" />
		
		<h1 id="dshTitle">Панель управления</h1>
		
		<ext:Store ID="storeDashboard" runat="server">        
			<Reader>
				<ext:JsonReader>
					<Fields>
						<ext:RecordField Name="Title" />
						<ext:RecordField Name="Items" IsComplex="true" />
					</Fields>
				</ext:JsonReader>
			</Reader>
		</ext:Store>
		
		<ext:Panel ID="pnlDashBoard" runat="server" Cls="items-view" Layout="fit"	AutoHeight="true" AutoWidth="true" Border="false">
			<TopBar>
				<ext:Toolbar ID="toolBarDashboard" runat="server" Flat="true">
					<Items>
						<ext:ToolbarFill ID="ctl32" />
						
						<ext:Button ID="btnExpand" runat="server" Icon="BulletPlus" Text="Развернуть">
							<Listeners>
								<Click Handler="#{dvDashboard}.el.select('.group-header').removeClass('collapsed');" />
							</Listeners>
						</ext:Button>
						
						<ext:Button ID="btnCollapse" runat="server" Icon="BulletMinus" Text="Свернуть">
							 <Listeners>
								<Click Handler="#{dvDashboard}.el.select('.group-header').addClass('collapsed');" />
							</Listeners>
						</ext:Button>
						
						<ext:ToolbarSpacer ID="toolbarSpacer" runat="server" Width="30" />
					</Items>
				</ext:Toolbar>
			</TopBar>
			<Items>
				<ext:DataView ID="dvDashboard" runat="server" StoreID="storeDashboard" SingleSelect="true" OverClass="x-view-over" ItemSelector="div.item-wrap" AutoHeight="true" EmptyText="Нет данных для отображения">
					<Template ID="templateDashboard" runat="server">
						<Html>
							<div id="items-ct">
								<tpl for=".">
									<div class="group-header">
										<h2><div>{Title}</div></h2>
										<dl>
											<tpl for="Items">
												<div id="{Id}" class="item-wrap" ext:panel="{Accordion}" ext:menu="{MenuItem}">
													<img src="{Icon}"/>
													<div>
														<H6>{Title}</H6>                                                    
													</div>
												</div>
											</tpl>
											<div style="clear:left"></div>
										 </dl>
									</div>
								</tpl>
							</div>
						</Html>
					</Template>
					<Listeners>
						<SelectionChange Fn="selectionChanged" />
						<ContainerClick Fn="viewClick" />
					</Listeners>
				</ext:DataView>
			</Items>
		</ext:Panel>

	</form>
</body>
</html>
